import {
    View, FlatList, Dimensions, RefreshControl, TouchableOpacity,
    TouchableHighlight, Text, StyleSheet, Image
} from 'react-native';
import React, { PureComponent } from 'react';
import Urls, { getRealUrl } from '../const/Urls'
import LocalImg from '../const/Images'
import moment from 'moment'
import ActionSheet from 'antd-mobile-rn/lib/action-sheet'


class PageYbjh extends PureComponent {

    constructor(props) {
        super(props);
        this.user = this.props.user;
        this.pageNum = 1;
        this.isLoadMore = true;
        this.type = 0;
        this.state = {
            data: [],
            isLoading: false,
        }
    }

    componentDidMount() {
        this.pageNum = 1;
        this.setState({
            data: [],
        });
        this.isLoadMore = true;
        this.loadData();
    }


    render() {
        return (
            <View style={{ flexDirection: 'column', flex: 1 }}>

                <View style={{
                    flexDirection: 'row',
                    flex: 0,
                    height: 60,
                    alignItems: 'center',
                    justifyContent: 'center',
                    backgroundColor: '#0066FF'
                }}>
                    <View style={{ flex: 1, padding: 10 }}>
                        <TouchableOpacity onPress={() => this.props.navigation.pop()}>
                            <Image source={LocalImg['backImg']} style={{ height: 30, width: 30, resizeMode: 'contain' }} />
                        </TouchableOpacity>
                    </View>
                    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ fontSize: 20, color: '#ffffff' }}>移泊计划</Text>
                    </View>

                    <View style={{ flex: 1, alignItems: 'flex-end', padding: 10 }}>
                        <TouchableOpacity onPress={() => this.showActionSheet()}>
                            <Image source={LocalImg['searchIcon']}
                                style={{ height: 30, width: 30, resizeMode: 'contain' }} />
                        </TouchableOpacity>
                    </View>
                </View>


                <FlatList
                    data={this.state.data}
                    renderItem={(item, index) => this.renderRow(item, index)}
                    keyExtractor={this.keyExtractor}
                    ItemSeparatorComponent={this.separator}
                    ListFooterComponent={() => this.footerView()}
                    //onEndReached={() => this.loadMore()}
                    //onEndReachedThreshold={0.1}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.isLoading}
                            onRefresh={() => this.onRefresh()}
                        />
                    } />

            </View>
        )
    }

    keyExtractor = (item, index) => item.ID + ""

    separator(index) {
        return (
            <View key={index} style={{ height: 1, backgroundColor: '#CCCCCC' }} />
        )
    }


    footerView() {
        return (
            <View style={{ flexDirection: 'row', justifyContent: 'center', paddingTop: 20, paddingBottom: 30 }}>
                <Text>到底了</Text>
            </View>
        )
    }

    loadMore() {
        if (!this.state.isLoading && this.isLoadMore) {
            this.loadData();
        }
    }

    onRefresh() {
        this.pageNum = 1;
        this.setState({
            data: [],
        });
        this.isLoadMore = true;
        this.loadData();
    }

    loadData() {
        this.setState({
            isLoading: true
        });
        const request = new Map();
        request.set('state', this.type);
        request.set('pageNum', this.pageNum);
        fetch(getRealUrl(Urls['ybjhUrl'], request), {
            method: "GET",
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json"
            },
        })
            .then(response => response.json())
            .then(responseJson => {
                if (responseJson instanceof Array) {
                    this.setState({
                        data: this.state.data.concat(responseJson),
                    });

                    if (responseJson.length > 0) {
                        this.pageNum = this.pageNum + 1;
                    } else {
                        this.isLoadMore = false;
                    }
                }
                this.setState({
                    isLoading: false
                })
            })
            .catch(error => {
                console.error(error);
                this.setState({
                    isLoading: false
                });
                this.isLoadMore = true;
            });
    }


    processDateTime(date) {
        //const m = moment(date, moment.ISO_8601);
        const m = moment(date);
        if (m.isValid()) {
            return m.format('DD/HHmm')
        } else
            return ""
    }


    renderRow({ item, index }) {
        let id = item.ID;

        return (

            <TouchableHighlight onPress={() => this.enterDetail({ id })} key={item.ID}>
                <View style={{
                    overflow: 'hidden',
                    flexDirection: 'row',
                    justifyContent: 'center',
                    alignItems: 'flex-start',
                    backgroundColor: '#F6F6F6'
                }}>
                    <View style={{ marginLeft: 5, marginTop: 10 }}>
                        <Text style={{ color: '#0066FF' }}>{index + 1}.</Text>
                    </View>

                    <View style={[styles.text, { flex: 1, marginLeft: 10, marginTop: 10, justifyContent: 'center' }]}>
                        <View style={{ flexDirection: 'row' }}>
                            <Text style={[styles.text, { fontWeight: 'bold' }]}>
                                {item.SHIP_NAME}
                            </Text>
                            <Text style={styles.text}>
                                {item.SHIP_LENGTH}/{item.CSQ}/{item.CSH}
                            </Text>
                            <Text style={styles.text}>
                                {item.PILOT_NAME}
                            </Text>
                        </View>

                        <View style={{ flexDirection: 'row' }}>
                            <Text style={styles.text}>
                                {this.processDateTime(item.PILOT_TIME)}--{this.processDateTime(item.PILOT2_TIME)}
                            </Text>
                        </View>

                        <View style={{ flexDirection: 'row' }}>
                            <Text style={styles.text}>
                                {item.PILOT_PLACE_FROM}--{item.PILOT_PLACE_TO}
                            </Text>
                        </View>

                    </View>
                </View>
            </TouchableHighlight>
        )
    }


    enterDetail(id) {
        this.props.navigation.navigate('PageYbjhDetail', {
            id: id
        })
    }


    showActionSheet() {
        ActionSheet.showActionSheetWithOptions({
            options: ['全部', '上海', '洋山', '金山孚宝', '绿化山', '交接中心'],
            message: ''
        }, (buttonIndex) => {


        })
    }

}

const styles = StyleSheet.create({
    phone: {
        flex: 1,
        textDecorationLine: 'underline',
        color: '#0066FF',
    },
    text: {
        flex: 1
    },
    row: {
        flexDirection: 'column',
        justifyContent: 'center',
        padding: 10,
    },
});


export default PageYbjh;